<template>
  <div>
    <div class="detail">
      <!-- 打开页面 -->
      <OpenItem />

      <!-- 目录图片-->

      <div class="intro">
        <img :src="`${baseURL}` + '/' + albumInfo.cover" class="introImg" />
        <div class="introText">
          <span>{{ albumInfo.title }}</span>
          <div class="avator">
            <img :src="`${baseURL}` + '/' + userinfo.logo" alt="" />
            <span>{{ userinfo.nickname }}</span>
          </div>
          <div class="line"></div>
          <span class="order"
            >已订阅
            {{
              `${
                subscribeCount / 100000000 > 1
                  ? (subscribeCount / 100000000).toFixed(2) + "亿"
                  : (subscribeCount / 10000).toFixed(2) + "万"
              }`
            }}</span
          >
        </div>
      </div>

      <!-- 简介 -->
      <div class="introItem">
        <div class="word" ref="word">
          <p>{{ albumInfo.shortIntro }}</p>
        </div>
        <div class="mask" v-show="isShowIntro"></div>
        <p class="more" v-show="isShowIntro" @click="showIntro">
          <Icon name="arrow-down" />
        </p>
      </div>

      <!-- 打开App按钮 -->
      <div class="btn">打开APP，完整收听</div>
    </div>

    <!-- 节目 -->
    <div class="program">
      <!-- 节目 -->
      <div class="title">节目({{ program.totalCount }})</div>
      <div class="programItem">
        <div class="item" v-for="item in program.trackDetailInfos" :key="item.id" @click="toSound(item.id)">
          <Icon name="play-circle-o" class="play" size="30px" color="#999999" />
          <div class="itemText">
            {{ item.trackInfo.title }}
          </div>
          <Icon name="down" class="downlode" size="14px" />
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="lodeMore" @click="getMoreProgram">
        <span>加载更多</span>
        <Icon name="arrow-down" color="#f86442" size="20px" />
      </div>
    </div>

    <!-- 主播信息 -->
    <div class="Anchor">
      <div class="title">主播信息</div>
      <div class="AnchorItem">
        <div class="anchorInfo">
          <img :src="`${baseURL}` + '/' + userinfo.logo" alt="" />
          <div class="anchorInfoItem">
            <div>{{ userinfo.nickname }}</div>
            <div class="desc">
              {{ userinfo.personalSignature }}
            </div>
            <div class="person">
              <Icon name="friends-o" />
              <span>
                {{
                  `${
                    statCountInfoUse.followerCount / 100000000 > 1
                      ? (statCountInfoUse.followerCount / 100000000).toFixed(
                          2
                        ) + "亿"
                      : (statCountInfoUse.followerCount / 10000).toFixed(2) +
                        "万"
                  }`
                }}人</span
              >
            </div>
          </div>
        </div>

        <!-- 关注 -->
        <div class="focus">
          <Icon name="friends-o" size="30px" color="#f86442" />
          <span>加关注</span>
        </div>
      </div>
      <!-- 主播内容展示 -->
      <div class="content">
        <div class="imgItem" v-for="item in albumBriefDetailInfos" :key="item.id">
          <img :src="`${baseURL}` + '/' + item.albumInfo.cover" />
          <span>{{ item.albumInfo.salePoint }}</span>
        </div>
      </div>
    </div>

    <!-- 用户评论 -->
    <div class="comments">
      <div class="title">用户评论</div>
      <div class="allcomments" ref="allcomments">
        <div class="commentsItem" v-for="item in comments" :key="item.id">
          <div class="usercomment">
            <img :src="`${baseURL}` + '/' + item.smallHeader" />
            <div class="usercommentItem">
              <div class="username">{{ item.nickname }}</div>
              <div class="desc">
                {{ item.content }}
              </div>
              <div class="repeat">
                <div class="time">
                  <span>回复</span>
                  <span>{{ item.createdAt }}</span>
                </div>
                <div class="good">
                  <span>{{ item.likes }}</span>
                  <Icon name="good-job-o" size="18px" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 遮罩 -->
      <div class="mask" v-show="isShowComments"></div>
      <p class="more" v-show="isShowComments" @click="showComments">
        <Icon name="arrow-down" />
      </p>
      <!-- 加载更多 -->
      <div class="lodeMore" @click="getMoreComents">
        <span @click="showComments">加载更多</span>
      </div>
    </div>

    <!-- 相似专辑 -->
    <div class="album">
      <div class="title">相似专辑</div>
      <div class="albumItem">
        <div class="item" v-for="item in docs" :key="item.albumId">
          <img :src="`${baseURL}` + '/' + item.coverPath" />
          <span>{{ item.title }}</span>
        </div>
      </div>
      <!-- 换一批 -->
      <div class="change" @click="changeSeb">
        <span>
          <Icon name="replay" />换一批
        </span>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">
      <!-- 节目 -->
      <div class="title">猜你喜欢</div>
      <div class="likeItem">
        <div class="item" v-for="item in likeList.albums" :key="item.albumId">
          <img :src="`${baseURL}` + '/' + item.albumCoverPath" />
          <div class="anchorInfoItem">
            <div class="liketitle">{{ item.albumTitle }}</div>
            <div class="desc">
              {{ item.intro }}
            </div>
            <div class="person">
              <Icon name="play-circle-o" />
              <span>
                {{
                  `${
                    item.albumPlayCount / 100000000 > 1
                      ? (item.albumPlayCount / 100000000).toFixed(2) + "亿"
                      : (item.albumPlayCount / 10000).toFixed(2) + "万"
                  }`
                }}</span
              >
              <Icon name="friends-o" />
              <span> {{ item.albumTrackCount }} </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 加载更多 -->
      <div class="lodeMore" @click="getMoreLike">
        <span>查看更多</span>
        <Icon name="arrow" color="#f86442" size="20px" />
      </div>
    </div>

    <!-- 版权所有 -->
    <div class="footer">
      <img src="./images/喜马拉雅logo.png" alt="" />

      <p>@2014-2023 喜马拉雅 版权所有</p>
    </div>

    <!-- 打开app -->
    <div class="appopen">
      <span>App内打开</span>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, watch } from "vue";
import { cloneDeep } from "lodash";
import {
  getHeaderApi,
  getUserInfoApi,
  getPargramApi,
  getGoodsApi,
  getCommentApi,
  getSeoApi,
  getLikeApi,
} from "@/api/detail";
import { AlbumInfo } from "@/api/model/detailModel";
import router from "@/router";
import store from "@/store";
export default defineComponent({
  name: "Detail",
});
</script>

<script lang="ts" setup>
import { Button, Icon } from "vant";
import OpenItem from "@/component/openItem/index.vue";
import { useRoute, useRouter } from "vue-router";

//1.引入pinia中的某个模块暴露的方法
import useProgramState from "@/store/program"
import { storeToRefs } from 'pinia';

//2.调用pinia模块中暴露的方法，得到一个对象
const programState = useProgramState()
//pinia中数据的对象是一个代理对象，内部可以直接拿到数据，是ref对象格式的
console.log(programState, "ProgramState");

//3.解构pinia模块内部的数据,如果直接解构得到的不是ref对象，需要使用storeToRefs方法解构
const { programsList } = storeToRefs(programState)
console.log(programsList, "programsList22222222222222");

// 获取路由
let ablumId = 0;
// 作者id
let anchorId = 0;
// 更新时间
let updatedTime = 0;
//keyword
let keyword = "";

//获取路由实例
const router = useRouter()

// 去到音频页面
const toSound = (id: number) => {
  router.push({
    name: "Sound",
    params: {
      id: id
    }
  })
}
const route = useRoute();
const getRouter = () => {
  console.log(route, "route");
  ablumId = +route.params.id;
  console.log(ablumId);
};

// 定义一些属性，用来控制
// 简介
const isShowIntro = ref(true);

// 用户评论

const isShowComments = ref(true);

// 隐藏内容简介
const word = ref();
const showIntro = () => {
  isShowIntro.value = false;
  // 修改word的样式
  console.log(word);
  word.value.style.height = "auto";
};

// 隐藏评论
const allcomments = ref();
const showComments = () => {
  isShowComments.value = false;
  allcomments.value.style.height = "auto";
};

// 计算属性
const subscribeCount = computed(() => {
  return statCountInfo.value.subscribeCount;
});
// 定义转发代理数据
const baseURL = import.meta.env.VITE_BASE_IMG;

// 定义头部数据
let albumInfo = ref<AlbumInfo>({
  title: "",
  shortIntro: "",
  salePoint: "",
  cover: "",
});

let statCountInfo = ref<any>({});

// 获取主播信息
let userinfo = ref<any>({});
let statCountInfoUse = ref<any>({});
let albumBriefDetailInfos = ref<any>([]);

// 节目列表
let program = ref<any>({});

// 用户评论

let comments = ref<any>([]);

// 相似专辑
const allDocs = ref<any>([]);
let docs = ref<any>([]);

// 猜你喜欢
let likeList = ref<any>({});

//

//获取头部信息

const getHeaderData = async () => {
  const res = await getHeaderApi(ablumId);
  albumInfo.value = res.albumDetailInfo.albumInfo;
  statCountInfo.value = res.albumDetailInfo.statCountInfo;
  // console.log(albumInfo, 222);
  // 获取用户id
  anchorId = res.anchorId;
  // 获取更新时间
  updatedTime = res.albumDetailInfo.albumInfo.updatedTime as number;
  // 获取keyword
  keyword = res.albumDetailInfo.albumInfo.customTitle as string;

  console.log(res, "头部信息");
  console.log(anchorId, "anchorId.value");
};

// 获取用户信息
const reqUserInfo = reactive<any>({ userCountKeys: "follower" });
const getUserInfo = async () => {
  const res = await getUserInfoApi(anchorId, reqUserInfo);
  userinfo.value = res.userInfo;
  statCountInfoUse.value = res.statCountInfo;
  // console.log(userinfo.value, "userinfo");
  console.log(res, "主播信息");
};
// 获取主播的作品
const reqGood = reactive<any>({
  anchorId: anchorId,
  page: 1,
  pageSize: 4,
  asc: false,
});
const getUserGoods = async () => {
  reqGood.anchorId = anchorId;
  const res = await getGoodsApi(reqGood);
  albumBriefDetailInfos.value = res.albumBriefDetailInfos;
  // 保留前三个数据
  albumBriefDetailInfos.value.splice(3);
  console.log(res, "主播作品");
};
// 获取节目列表
const reqParams = reactive<any>({
  albumId: ablumId,
  page: 1,
  pageSize: 10,
  asc: true,
  countKeys: "play,comment",
  v: updatedTime,
});
const getProgram = async () => {
  reqParams.albumId = ablumId;
  reqParams.v = updatedTime;
  const res = await getPargramApi(reqParams);
  console.log(res, "节目列表");

  // 修改store里的state   programsList
  programsList.value = res.trackDetailInfos
  localStorage.setItem('programsList', JSON.stringify(res.trackDetailInfos))
  program.value = res;
  // console.log(res);
};

// 获取更多节目列表
const getMoreProgram = () => {
  console.log("more");

  // pageSize+10
  reqParams.pageSize = program.value.trackDetailInfos.length + 10;

  // 重新获取数据
  getProgram();
};

// 获取用户评论
const userComments = reactive<any>({
  page: 1,
  pageSize: 10,
  albumId: ablumId,
  v: updatedTime,
});
const getComments = async () => {
  // 重新赋值
  userComments.albumId = ablumId;
  userComments.v = updatedTime + 2;

  const res = await getCommentApi(userComments);
  const newComments = res.comments;
  console.log(res, "用户评论");
  comments.value = [...comments.value, ...newComments];
};

// 虎丘更多用户评论
const getMoreComents = () => {
  console.log("morecomment");

  // 去掉遮罩
  showComments();
  // 修改page
  userComments.page += 1;

  // 重新获取评论
  getComments();
};

// 获取相似专辑
const reqSeo = reactive<any>({
  kw: keyword,
  page: 1,
  rows: 19,
  device: "iPhone",
  condition: "relation",
  spellchecker: true,
  core: "album",
});
let ablumNum = 0;
const getSeo = async () => {
  reqSeo.kw = keyword;
  const res = await getSeoApi(reqSeo);
  allDocs.value = cloneDeep(res.album.docs);
  docs.value = allDocs.value.slice(ablumNum, ablumNum + 6);
  console.log(res, "相似专辑");
};
//换一批相似专辑
const changeSeb = () => {
  console.log(222);

  ablumNum += 6;
  if (allDocs.value.length - ablumNum < 6) {
    console.log("111");

    ablumNum = 0;
  }

  docs.value = allDocs.value.slice(ablumNum, ablumNum + 6);
};

// 猜你喜欢
const reqLike = reactive<any>({
  pageNum: 1,
  pageSize: 5,
  sort: 1,
});
const getLikeList = async () => {
  const res = await getLikeApi(reqLike);
  likeList.value = res;
  console.log(res, "猜你喜欢");
};

//获取更多猜你喜欢
const getMoreLike = () => {
  console.log("morelike");

  // 修改pageSize
  reqLike.pageSize = likeList.value.albums.length + 5;

  //重新获取数据
  getLikeList();
};

// 初始化获取数据
onMounted(async () => {
  getRouter();
  await getHeaderData();
  getUserInfo();
  getProgram();
  getUserGoods();
  getComments();
  getSeo();
  getLikeList();
});
</script>

<style lang="scss" scoped>
.intro {
  width: 100%;
  height: 145px;
  background: #704a46;
  display: flex;
  align-items: center;

  .introImg {
    width: 100px;
    height: 100px;
    margin: 0 20px;
    border-radius: 5px;
  }

  .introText {
    color: #fff;
    padding-right: 5px;

    span {
      font-size: 18px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }

    .avator {
      display: flex;
      align-items: center;
      margin: 10px 0px;

      img {
        width: 20px;
        border-radius: 50%;
      }

      span {
        font-size: 12px;
        margin-left: 5px;
      }
    }

    .line {
      border-top: 1px solid #b7a3a0;
      margin-bottom: 10px;
    }

    .order {
      font-size: 12px;
    }
  }
}

// 简介文字
.introItem {
  position: relative;
  // background: red;

  .word {
    height: 145px;
    overflow: hidden;
    font-size: 16px;

    p {
      padding: 0px 10px;
    }
  }

  .mask {
    position: absolute;
    width: 100%;
    height: 150px;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(-180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.8) 34%,
        rgba(255, 255, 255, 0.95) 66%,
        #fff 100%);
  }

  .more {
    position: absolute;
    top: 100px;
    left: 50%;
  }
}

.btn {
  width: 240px;
  height: 40px;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff8a6e, #f66743);
  text-align: center;
  line-height: 40px;
  color: #fff;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  margin-left: 68px;
  margin-top: 10px;
  font-size: 16px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

// 节目
.program {
  width: 375px;
  font-size: 18px;

  .programItem {
    .item {
      display: flex;
      width: 345px;
      padding: 12px 0px;
      border-bottom: 1px solid #f3f4f5;
      margin-left: 10px;

      // align-items: center;
      .itemText {
        font-size: 16px;
        width: 266px;
        height: 52px;
        padding: 0px 10px;
        line-height: 24px;
      }

      .play {
        margin-top: 5px;
      }
    }
  }

  .lodeMore {
    width: 345px;
    height: 22px;
    padding: 17px 0px;
    color: #f86442;
    text-align: center;
    font-size: 16px;
  }
}

// 主播
.Anchor {
  width: 345px;
  height: 272px;
  padding: 15px;

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .AnchorItem {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .anchorInfo {
      display: flex;

      img {
        width: 54px;
        height: 54px;
        border-radius: 50%;
      }

      .anchorInfoItem {
        display: flex;
        flex-direction: column;
        padding: 0px 20px 0px 10px;
        justify-content: space-between;
        font-size: 18px;

        .desc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 225px;
          font-size: 14px;
          color: #999999;
          padding: 4px 0px;
        }

        .person {
          font-size: 12px;
          color: #999999;
        }
      }
    }

    .focus {
      display: flex;
      flex-direction: column;
      align-items: center;

      span {
        font-size: 12px;
        color: #f86442;
      }
    }
  }

  .content {
    width: 335px;
    height: 144px;
    display: flex;
    padding: 27px 10px 0px 0px;

    .imgItem {
      margin-right: 30px;

      img {
        border-radius: 5px;
        width: 90px;
      }

      span {
        width: 90px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-size: 14px;
      }
    }
  }
}

// 用户评论
.comments {
  width: 345px;
  // height: 332px;
  padding: 15px;
  position: relative;
  margin-bottom: 30px;

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .allcomments {
    height: 200px;
    overflow: hidden;

    .commentsItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .usercomment {
        display: flex;

        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }

        .usercommentItem {
          display: flex;
          flex-direction: column;
          padding: 0px 20px 0px 10px;
          justify-content: space-between;

          .username {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            margin-bottom: 4px;
          }

          .desc {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 301px;
            font-size: 14px;
          }

          .repeat {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999999;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .mask {
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 35px;
    background-image: linear-gradient(-180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.8) 34%,
        rgba(255, 255, 255, 0.95) 66%,
        #fff 100%);
  }

  .more {
    position: absolute;
    bottom: 40px;
    left: 48%;
  }

  .lodeMore {
    width: 345px;
    height: 22px;
    color: #f86442;
    text-align: center;
    font-size: 16px;

    // margin-bottom: 30px;
  }
}

// 相似专辑
.album {
  width: 345px;
  padding: 15px;

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .albumItem {
    display: flex;
    flex-wrap: wrap;

    // margin-right: 20px;
    .item {
      width: 103px;
      margin-right: 10px;
      margin-bottom: 30px;

      img {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        margin-bottom: 5px;
      }

      span {
        width: 90px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-size: 14px;
      }
    }
  }

  .change {
    text-align: center;

    span {
      width: 52px;
      height: 16px;
      background: #f24821;
      padding: 7px 10px;
      font-size: 13px;
      color: #fff;
      border-radius: 14px;
    }
  }
}

// 猜你喜欢
.like {
  width: 345px;
  padding: 15px;

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .likeItem {
    .item {
      display: flex;
      width: 345px;
      padding: 12px 0px;
      border-bottom: 1px solid #f3f4f5;

      img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
        margin-right: 15px;
      }

      .anchorInfoItem {
        display: flex;
        flex-direction: column;
        padding: 0px 20px 0px 10px;
        justify-content: space-between;

        .liketitle {
          font-size: 17px;
        }

        .desc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 225px;
          font-size: 14px;
          color: #999999;
          padding: 5px 0px;
        }

        .person {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }

  .lodeMore {
    width: 345px;
    height: 22px;
    padding: 29px 0px;
    color: #f86442;
    text-align: center;
    font-size: 16px;
  }
}

// 版权所有
.footer {
  width: 375px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(./images/bg.png);
  background-size: 375px 180px;

  img {
    width: 103px;
    margin-top: 36px;
  }

  p {
    font-size: 13px;
    color: #3e3b3b;
    margin-top: 30px;
  }
}

// app打开
.appopen {
  position: fixed;
  bottom: 40px;
  text-align: center;
  width: 375px;

  span {
    width: 80px;
    padding: 10px 15px;
    background: #f66743;
    color: #fff;
    border-radius: 24px;
    font-size: 14px;
  }
}
</style>
